<template>
  <div
    id="spreadRoot"
    class="bg-2F3843 c-flex-column"
  >
    <div class="c-br20 c-flex-center c-flex-row c-flex-grow1 c-h0 c-p">
      <div class="c-ww394 c-br20">
        <img
          class="c-ww394 c-br20 app-save-img"
          id="spreadImg"
          alt
        >
      </div>
    </div>
    <footer class="c-bg-white c-hh180 c-bd-t1 c-w100 c-ph24">
      <p class="c-textAlign-c c-fs20 c-fc-sblack c-mt20 c-mb20">长按上方图片保存，分享给朋友</p>
      <div
        class="c-contexty-hidden c-contextX-scroll c-ws-n"
        style="overflow:auto"
        id="scroll"
      >
        <template v-for="(item,index) in content">
          <div
            :key="index"
            @click="clickChangeImg(index)"
            v-if="item.promotionImg"
            class="c-p c-mr20 c-inlineblack c-hh100 c-ww100"
          >
            <img
              class="c-hh100 c-ww100 c-br10 img-pe-none"
              :src="$addXossFilter(item.promotionImg)"
              alt
            >
            <img
              v-show="curIndex == index"
              class="c-pa c-ww32 c-hh32 check img-pe-none"
              src="../../../assets/check.png"
              alt
            >
          </div>
        </template>
      </div>
    </footer>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
const QRCODE_SIZE_MAP = {
  1: 240,
  2: 210,
  3: 180,
}
const DEFAULT_BG_LIST = [
  '',
  "https://kposshzcdn.ckjr001.com/companies/2020-03-02/EHt2NffiVapSLbSCKCkkzA3xQoAcqgWoLqO7rzMg.png?x-oss-process=style/w800",
  "https://kposshzcdn.ckjr001.com/companies/2020-03-02/UiSgfdAna0pT6Va6ziAPQWdTJMHr5f1g51mgmnMa.png?x-oss-process=style/w800",
  "https://kposshzcdn.ckjr001.com/companies/2020-03-02/d2nXHZaNA89tBHu4aG0Jqr44IBCmU2HW3HMdTi2c.png?x-oss-process=style/w800",
  "https://kposshzcdn.ckjr001.com/companies/2020-03-02/cDc5CE501Hx7ZTipXJMrapHBNSk3i586fOzkggB3.png?x-oss-process=style/w800",
];
const CANVANS_WIDTH = 640;
const CANVANS_HIGHT = 1136;
let defaultDrawOption1 = {
  content: [],
  promotionNum: '',
  isCustom: 0,
  isShow: 1,
  canvansImg: '',
  promotionImg: '',
  qrcodeImg: '',
  qrcodeX: 496,
  qrcodeY: 927,
  qrcodeW: 100,
  qrcodeH: 100,
  qrcodeSize: 100,
  qrcodeBasicColor: '',
  textContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'left',
    textX: 41,
    textY: 928,
    textLength: 480,
  },
  text3ContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'left',
    textX: 41,
    textY: 992,
    textLength: 620,
  },
  instructionOption: {
    text: '',
    fillStyle: 'rgb(255,255,255)',
    font: '20px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 1108,
    textLength: 480,
  }
}
let defaultDrawOption2 = {
  content: [],
  promotionNum: '',
  isCustom: 0,
  isShow: 1,
  canvansImg: '',
  promotionImg: DEFAULT_BG_LIST[1],
  qrcodeImg: '',
  qrcodeX: 496,
  qrcodeY: 927,
  qrcodeSize: 100,
  textContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'left',
    textX: 41,
    textY: 928,
    textLength: 480,
  },
  text3ContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'left',
    textX: 41,
    textY: 992,
    textLength: 480,
  },
  instructionOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '20px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 1108,
    textLength: 480,
  }
}
let defaultDrawOption3 = {
  content: [],
  promotionNum: '',
  isCustom: 0,
  isShow: 1,
  canvansImg: '',
  promotionImg: DEFAULT_BG_LIST[2],
  qrcodeImg: '',
  qrcodeX: 250,
  qrcodeY: 901,
  qrcodeSize: 140,
  textContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'left',
    textX: 73,
    textY: 812,
    textLength: 620,
  },
  text3ContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'left',
    textX: 41,
    textY: 992,
    textLength: 620,
  },
  instructionOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '20px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 1108,
    textLength: 620,
  }
}
let defaultDrawOption4 = {
  content: [],
  promotionNum: '',
  isCustom: 0,
  isShow: 1,
  canvansImg: '',
  promotionImg: DEFAULT_BG_LIST[3],
  qrcodeImg: '',
  qrcodeX: 67,
  qrcodeY: 890,
  qrcodeSize: 140,
  textContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'right',
    textX: 560,
    textY: 899,
    textLength: 480,
  },
  text3ContentOption: {
    text: '',
    fillStyle: 'rgb(0,0,0)',
    font: '26px Microsoft YaHei',
    textAlign: 'right',
    textX: 560,
    textY: 985,
    textLength: 480,
  },
  instructionOption: {
    text: '',
    fillStyle: 'rgb(255,255,255)',
    font: '20px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 1108,
    textLength: 620,
  }
}
let defaultDrawOption5 = {
  content: [],
  promotionNum: '',
  isCustom: 0,
  isShow: 1,
  canvansImg: '',
  promotionImg: DEFAULT_BG_LIST[4],
  qrcodeImg: '',
  qrcodeX: 270,
  qrcodeY: 791,
  qrcodeSize: 93,
  textContentOption: {
    text: '',
    fillStyle: 'rgb(255,255,255)',
    font: '26px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 923,
    textLength: 620,
  },
  text3ContentOption: {
    text: '',
    fillStyle: 'rgb(255,255,255)',
    font: '26px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 983,
    textLength: 620,
  },
  instructionOption: {
    text: '',
    fillStyle: 'rgb(255,255,255)',
    font: '20px Microsoft YaHei',
    textAlign: 'center',
    textX: 320,
    textY: 1108,
    textLength: 620,
  }
}
let downloadQrcodeImg = null;
export default {
  name: 'SpeadIndex',
  components: {},
  props: [],
  beforeCreate() {

  },
  data() {
    return {
      content: [],
      curIndex: 0,
      spreadArray: [],
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      this.html2canvas = res.default;
    })
  },
  computed: {

  },
  watch: {

  },
  methods: {
    getSpreadInfo() {
      utilJs.getMethod(global.apiurl + 'company/promoteShow', res => {
        let promoteData = res.promoteData || [];
        let defaultTextContent = `我是${res.nickname}`;
        let companyName = localStorage.getItem("companyName") || '';
        //公司名称超过15个字则超过用...显示
        companyName = companyName.length > 15 ? `${companyName.substr(0, 15)}...` : companyName;
        let defaultText3Content = `我为${companyName}代言`;
        for (let item of promoteData) {
          if (item.isShow == 1) {
            if (item.isCustom == 1) {
              let customDefault = {};
              customDefault = JSON.parse(JSON.stringify(defaultDrawOption1))
              // isCustom == 1 为自定义模板
              customDefault.content = item.content;
              customDefault.promotionNum = item.promotionNum;
              customDefault.isCustom = item.isCustom;
              customDefault.isShow = item.isShow;
              customDefault.promotionImg = this.$addXossFilter(item.promotionImg);
              customDefault.qrcodeX = item.qrcodeX;
              customDefault.qrcodeY = item.qrcodeY;
              customDefault.qrcodeBasicColor = item.qrcodeBasicColor;
              customDefault.qrcodeSize = QRCODE_SIZE_MAP[item.qrcodeSizeNum];
              customDefault.qrcodeW = item.qrcodeW;
              customDefault.qrcodeH = item.qrcodeH;
              customDefault.textContentOption.textX = item.textX;
              customDefault.textContentOption.textY = item.textY;
              customDefault.textContentOption.enableTextContent = item.enableTextContent;
              customDefault.textContentOption.text = item.enableTextContent == 1 ? item.textContent : defaultTextContent;
              customDefault.textContentOption.fillStyle = item.wordColor || customDefault.textContentOption.fillStyle;
              customDefault.text3ContentOption.textX = item.textX3;
              customDefault.text3ContentOption.textY = item.textY3;
              customDefault.text3ContentOption.enableText3Content = item.enableText3Content;
              customDefault.text3ContentOption.text = item.enableText3Content == 1 ? item.text3Content : defaultText3Content;
              customDefault.text3ContentOption.fillStyle = item.wordColor || customDefault.text3ContentOption.fillStyle;
              this.spreadArray.push(customDefault);
            } else {
              let systemDefault = {};
              if (item.promotionNum == 1) {
                systemDefault = JSON.parse(JSON.stringify(defaultDrawOption2));
              } else if (item.promotionNum == 2) {
                systemDefault = JSON.parse(JSON.stringify(defaultDrawOption3));
              } else if (item.promotionNum == 3) {
                systemDefault = JSON.parse(JSON.stringify(defaultDrawOption4));
              } else if (item.promotionNum == 4) {
                systemDefault = JSON.parse(JSON.stringify(defaultDrawOption5));
              }
              systemDefault.promotionNum = item.promotionNum;
              systemDefault.isCustom = item.isCustom;
              systemDefault.isShow = item.isShow;
              systemDefault.promotionImg = item.isCustomImg == 1 ? this.$addXossFilter(item.promotionImg) : systemDefault.promotionImg;
              systemDefault.qrcodeBasicColor = item.qrcodeBasicColor;
              systemDefault.textContentOption.enableTextContent = item.enableTextContent;
              systemDefault.textContentOption.text = item.enableTextContent == 1 ? item.textContent : defaultTextContent;
              systemDefault.textContentOption.fillStyle = item.wordColor || systemDefault.textContentOption.fillStyle;
              systemDefault.text3ContentOption.enableText3Content = item.enableText3Content;
              systemDefault.text3ContentOption.text = item.enableText3Content == 1 ? item.text3Content : defaultText3Content;
              systemDefault.text3ContentOption.fillStyle = item.wordColor || systemDefault.text3ContentOption.fillStyle;
              this.spreadArray.push(systemDefault)
            }
          }
        }
        for (let i = 0; i < this.spreadArray.length; i++) {
          let info = this.spreadArray[i];
          info.qrcodeImg = this.$addXossFilter(res.mpQrcode);
          info.instructionOption.text = res.instruction;
          //没开启自定义 && 文按为空的时候，使用默认文案
          info.textContentOption.text = info.textContentOption.enableTextContent != 1 && !info.textContentOption.text ? defaultTextContent : info.textContentOption.text;
          info.text3ContentOption.text = info.text3ContentOption.enableText3Content != 1 && !info.text3ContentOption.text ? defaultText3Content : info.text3ContentOption.text;
          //模板2文字全显示在一起
          if (info.promotionNum == 2) {
            let mergeText = info.textContentOption.text && info.text3ContentOption.text ? `${info.textContentOption.text}，${info.text3ContentOption.text}` : `${info.textContentOption.text}${info.text3ContentOption.text}`
            info.textContentOption.text = mergeText;
            info.text3ContentOption = {};
          }
        }
        this.content = this.spreadArray;
        this.curIndex = this.content[0].promotionImg ? 0 : 1;
        document.querySelector("#spreadImg").setAttribute("src", this.content[this.curIndex].promotionImg);
        this.downLoadImg(res.mpQrcode).then(res => {
          downloadQrcodeImg = res;
          this.drawSpreadImg();
        })
      });
    },
    downLoadImg(imgUrl) {
      return new Promise(function (resolve, reject) {
        const CUR_TIMETAMP = new Date().getTime();
        let img = new Image();
        img.crossOrigin = 'anonymous';
        if (!imgUrl.includes('base64')) {
          img.src = imgUrl.includes('?') ? `${imgUrl}&t=${CUR_TIMETAMP}` : `${imgUrl}?t=${CUR_TIMETAMP}`;
        }
        img.onload = function () {
          resolve(img);
        };
        img.error = function (e) {
          reject(e);
        }
      })
    },
    drawSpreadImg() {
      let drawInfo = this.content[this.curIndex];
      let c = document.createElement("canvas");
      c.width = CANVANS_WIDTH;
      c.height = CANVANS_HIGHT;
      let ctx = c.getContext("2d");
      ctx.save();
      this.downLoadImg(drawInfo.promotionImg).then(promotionImgRes => {
        ctx.drawImage(promotionImgRes, 0, 0, CANVANS_WIDTH, CANVANS_HIGHT);
        promotionImgRes = null;
        ctx.save();
        if (drawInfo.qrcodeBasicColor == 1) {
          ctx.fillStyle = "#ffffff";
          if (drawInfo.isCustom == 1) {
            ctx.fillRect(drawInfo.qrcodeX, drawInfo.qrcodeY, drawInfo.qrcodeW, drawInfo.qrcodeH);
            ctx.save();
          } else {
            ctx.fillRect(drawInfo.qrcodeX, drawInfo.qrcodeY, drawInfo.qrcodeSize, drawInfo.qrcodeSize);
            ctx.save();
          }
        }
        if (drawInfo.isCustom == 1) {
          ctx.drawImage(downloadQrcodeImg, drawInfo.qrcodeX, drawInfo.qrcodeY, drawInfo.qrcodeW, drawInfo.qrcodeH);
        } else {
          ctx.drawImage(downloadQrcodeImg, drawInfo.qrcodeX, drawInfo.qrcodeY, drawInfo.qrcodeSize, drawInfo.qrcodeSize);
        }
        ctx.save();
        ctx.textBaseline = "top";
        // 绘制我是xxx 文字
        if (drawInfo.content == null || drawInfo.content.length <= 0) {
          ctx.font = drawInfo.textContentOption.font;
          ctx.fillStyle = drawInfo.textContentOption.fillStyle;
          ctx.textAlign = drawInfo.textContentOption.textAlign;
          if (drawInfo.promotionNum == 1 && drawInfo.textContentOption.text.length > 11) {
            let text = drawInfo.textContentOption.text.substr(0, 11);
            ctx.fillText(text, drawInfo.textContentOption.textX, drawInfo.textContentOption.textY - 40, drawInfo.textContentOption.textLength);
            drawInfo.textContentOption.text = drawInfo.textContentOption.text.substr(11);
          } else if (drawInfo.promotionNum == 2 && drawInfo.textContentOption.text.length > 20) {
            let text = drawInfo.textContentOption.text.substr(20);
            ctx.fillText(text, drawInfo.textContentOption.textX, drawInfo.textContentOption.textY + 40, drawInfo.textContentOption.textLength);
            drawInfo.textContentOption.text = drawInfo.textContentOption.text.substr(0, 20);
          } else if (drawInfo.promotionNum == 3 && drawInfo.textContentOption.text.length > 11) {
            let text = drawInfo.textContentOption.text.substr(0, 11);
            ctx.fillText(text, drawInfo.textContentOption.textX, drawInfo.textContentOption.textY - 40, drawInfo.textContentOption.textLength);
            drawInfo.textContentOption.text = drawInfo.textContentOption.text.substr(11);
          }
          ctx.fillText(drawInfo.textContentOption.text, drawInfo.textContentOption.textX, drawInfo.textContentOption.textY, drawInfo.textContentOption.textLength);
          ctx.save();
          // 绘制我为xxx代言 文字
          if (drawInfo.text3ContentOption.text) {
            ctx.font = drawInfo.text3ContentOption.font;
            ctx.fillStyle = drawInfo.text3ContentOption.fillStyle;
            ctx.textAlign = drawInfo.text3ContentOption.textAlign;
            if (drawInfo.promotionNum == 1 && drawInfo.text3ContentOption.text.length > 11) {
              let text = drawInfo.text3ContentOption.text.substr(11);
              ctx.fillText(text, drawInfo.text3ContentOption.textX, drawInfo.text3ContentOption.textY + 40, drawInfo.text3ContentOption.textLength);
              drawInfo.text3ContentOption.text = drawInfo.text3ContentOption.text.substr(0, 11);
            } else if (drawInfo.promotionNum == 3 && drawInfo.text3ContentOption.text.length > 11) {
              let text = drawInfo.text3ContentOption.text.substr(11);
              ctx.fillText(text, drawInfo.text3ContentOption.textX, drawInfo.text3ContentOption.textY + 40, drawInfo.text3ContentOption.textLength);
              drawInfo.text3ContentOption.text = drawInfo.text3ContentOption.text.substr(0, 11);
            }
            ctx.fillText(drawInfo.text3ContentOption.text, drawInfo.text3ContentOption.textX, drawInfo.text3ContentOption.textY, drawInfo.text3ContentOption.textLength);
            ctx.save();
          }
        } else {
          drawInfo.content.forEach((item, index) => {
            this.fillTextStr(ctx, item.width, item.height, item.size, item.color, item.lineHeight, item.textAlign, item.verticalAlign, item.posX, item.posY, item.letterSpacing, item.fontWeight, item.name, item.fontStyle)
          });
        }
        // 绘制底部技术支持图标
        ctx.font = drawInfo.instructionOption.font;
        ctx.fillStyle = drawInfo.instructionOption.fillStyle;
        ctx.textAlign = drawInfo.instructionOption.textAlign;
        ctx.fillText(drawInfo.instructionOption.text, drawInfo.instructionOption.textX, drawInfo.instructionOption.textY, drawInfo.instructionOption.textLength);
        ctx.save();
        this.convertCanvasToImage(ctx);
      });
    },
    fillTextStr(ctx, width, height, size, fillStyle, lineHeight, textAlign, verticalAlign, posX, posY, letterSpacing, fontWeight, name, fontStyle) {
      let fontSize = size * 2.5098;
      let LineHeight = lineHeight * 2.5098;
      let FontWeight = fontWeight || 'normal'
      ctx.fillStyle = fillStyle;
      ctx.textBaseline = verticalAlign;
      ctx.textAlign = textAlign;
      ctx.font = `${fontStyle} normal ${FontWeight} ${fontSize}px/${LineHeight}px Microsoft YaHei`;
      if (textAlign == 'left' && verticalAlign == 'top') {
        this.toFormateStr(ctx, name, width, -1, posX, posY, LineHeight)
      } else if (textAlign == 'left' && verticalAlign == 'middle') {
        this.toFormateStr(ctx, name, width, -1, posX, posY + height / 2, LineHeight)
      } else if (textAlign == 'left' && verticalAlign == 'bottom') {
        this.toFormateStr(ctx, name, width, -1, posX, posY + height, LineHeight)
      } else if (textAlign == 'right' && verticalAlign == 'top') {
        this.toFormateStr(ctx, name, width, -1, width + posX, posY, LineHeight)
      } else if (textAlign == 'right' && verticalAlign == 'middle') {
        this.toFormateStr(ctx, name, width, -1, width + posX, posY + height / 2, LineHeight)
      } else if (textAlign == 'right' && verticalAlign == 'bottom') {
        this.toFormateStr(ctx, name, width, -1, width + posX, posY + height, LineHeight)
      } else if (textAlign == 'center' && verticalAlign == 'top') {
        this.toFormateStr(ctx, name, width, -1, width / 2 + posX, posY, LineHeight)
      } else if (textAlign == 'center' && verticalAlign == 'middle') {
        this.toFormateStr(ctx, name, width, -1, width / 2 + posX, posY + height / 2, LineHeight)
      } else if (textAlign == 'center' && verticalAlign == 'bottom') {
        this.toFormateStr(ctx, name, width, -1, width / 2 + posX, posY + height, LineHeight)
      }
    },
    // 换行canvas文字ctx: canvas绘图上下文，str：需要绘制的文本内容，draw_width：绘制后的文字显示宽度，lineNum：最大行数，超出……表示，如果传入-1可以达到自动换行
    // startX：绘制文字的起点X轴坐标，startY：绘制文字的起点Y轴坐标，steps：文字行间距
    toFormateStr(ctx, str, draw_width, lineNum, startX, startY, steps) {
      var strWidth = ctx.measureText(str).width;// 测量文本源尺寸信息（宽度）
      var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;
      var liner = Math.ceil(sreLN);// 计算文本源一共能生成多少行
      let strlen = parseInt(str.length / sreLN);// 等比缩放测量一行文本显示多少个字符
      // 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替
      if (strWidth < draw_width) {
        ctx.fillText(str, startX, startpoint);
      } else {
        for (var i = 1; i < liner + 1; i++) {
          let startPoint = strlen * (i - 1);
          if (i < lineNum || lineNum == -1) {
            keyStr = str.substr(startPoint, strlen);
            ctx.fillText(keyStr, startX, startpoint);
          } else {
            keyStr = str.substr(startPoint, strlen - 5) + '...';
            ctx.fillText(keyStr, startX, startpoint);
            break;
          }
          startpoint = startpoint + steps;
        }
      }
    },
    convertCanvasToImage(ctx) {
      if (!document.getElementById('spreadImg') || !ctx.canvas) {
        return;
      }
      try {
        var dataURL = ctx.canvas.toDataURL("image/jpeg");
        document.getElementById('spreadImg').src = dataURL;
        this.content[this.curIndex].canvansImg = dataURL;
        ctx = null;
      } catch (err) {
        let errorData = {
          errorEvent: JSON.stringify(err),
          errorType: 'SPREAD_CANVAS_TO_IMG',
        }
        utilJs.reprotError(errorData);
      }
    },
    clickChangeImg(index) {
      if (this.curIndex == index) {
        return;
      }
      this.curIndex = index;
      if (this.content[index].canvansImg) {
        document.querySelector("#spreadImg").setAttribute("src", this.content[index].canvansImg);
        return;
      }
      this.drawSpreadImg();
    },
    //分享
    wechatShare: function () {
      let title = window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/spread/spreadIndex" +
        "?refereeId=" +
        localStorage.getItem("userId");
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/spread/spreadIndex" +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    }
  },
  activated() {
    setDocumentTitle("分享");
    let $this = this;
    let fromQr = this.$route.query.fromQr;//我要推广他识别二维码跳转到升级会员页面
    if (fromQr == 1) {
      utilJs.getMethod(global.apiurl + 'company/vipType', function (res) {
        let vipType = res.vipType;
        if (vipType == 1) {
          $this.$routerGo($this, "push", { path: "/member/vip/vipUp" });
        } else {
          $this.$routerGo($this, "push", { path: "/" });
        }
      });
      return;
    }
    //如果是ios,则去掉minHeight设置，防止底部前进后退导航挡住页面
    if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      document.getElementById("spreadRoot").style.minHeight = "";
      document.getElementById("spreadRoot").style.height = "100%";
    }
    this.curIndex = 0;
    this.spreadArray = [];
    this.getSpreadInfo();
    this.wechatShare();
  },
  deactivated() {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg-2F3843 {
  background-color: #2f3843;
}
.check {
  top: calc(50% - 0.4rem);
  left: calc(50% - 0.4rem);
}
</style>
